<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="fr">
	<head> 
		<title>Bitstrip(s) - Studio de création</title>
		<meta charset="UTF-8"/>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="/bitstrip/assets/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="/bitstrip/assets/css/jquery-ui-1.10.4.custom.css"/>
	</head>
	<body>
		<div id="fb-root"></div>
		
		<div class="page-overlay-dark"></div>
		
		<div class="page-overlay"></div>
		
		<div class="message-box"></div>
       	
       	<nav class="access-links">
       		<a href="/bitstrip/ilsparlentdemoi">Qui parle de moi ?</a>
       		<c:if test="${loggedin_user.getRole() == 'ROLE_ADMIN'}">
       			<a href="gerer_theme.action">Backoffice</a>
       		</c:if>
       		<a href="<c:url value="/j_spring_security_logout" />">Deconnexion</a>
       	</nav>
       	
		<h1 class="page-title">Bitstrip(s) création...</h1>
		
		<div class="home-container">
		 
			<aside class="configuration">
				<div class="config-expand-toggle expanded"></div>
				<h2>Recherche</h2>
				<div class="config-item config-nb-persons-selector">
					<label for="nb-persons">Nb. personnes :</label> 
					<select id="nb-persons">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
					</select>
				</div>
				
				
				<div class="config-instruction">Choisir un fond par thème ou mot(s) clef(s) :</div>
				
				<div class="config-item config-theme-selector">
					<select>						
						<option value="">Thèmes</option>
						<c:forEach var="theme" items="${themes}" >
							<option value="${theme.getId()}">${theme.getNom_theme()}</option>
						</c:forEach>
					</select>
				</div>
				
				<div class="config-item config-keyword-selector">
					<select>
						<option value="">Mots clefs</option>
						<c:forEach var="motclef" items="${motsclefs}" >
							<option value="${motclef.getId()}">${motclef.getLabel()}</option>
						</c:forEach>
					</select>
				</div>
				<div class="config-selected-keyword" data-nbadded="0"></div>				
				<input class="config-btn-show-backgrounds" type="button" value="Voir les fonds" />						
			</aside> 
			
			<section class="backgrounds-collection placeholder">
				<h2>Fonds correspondant à vos critères</h2>
				<div class="background-list">
					<h3>Aucun fond</h3>
				</div>
			</section>
			
			<section class="creation">
				<div class="creation-zone" data-bg-url="http://localhost:8080/bitstrip/assets/img/fond/1.jpg" style="background:url('/bitstrip/assets/img/fond/1.jpg');">
					
				</div> 
				
				<div class="creation-zone-bottom">
					<input type="text" class="creation-legend" placeholder="Ecrivez une légende" />
					<input type="button" class="creation-submit" value="J'ai terminé !" />
				</div>
			</section>
			
			<section class="save-creation">
				<h1>Téléchargez, partagez, recommencez !</h1>
				<div class="creation-image">
					<!-- Laisser la balise image vide!! -->
					<img src="" />
				</div>
				<div class="save-options">
					<a class="home-button" title="Retourner à la page d'accueil" href="http://localhost:8080/bitstrip/"><img src="/bitstrip/assets/img/home.png" /></a>
					<a class="download-button" href="#" title="Télécharger l'image"><img src="/bitstrip/assets/img/download.png" /></a>
					<a class="facebook-share-button" href="#" data-user-fb-id="${loggedin_user.getFacebook_id()}" data-fb-token="${loggedin_user.getFacebook_token()}" title="Partager sur Facebook"><img src="/bitstrip/assets/img/facebook_share.png" /></a>
								
				</div>
			</section>

		</div>
		
		
		
		<div class="creation-persons-finder-injected">
			<input class="creation-persons-finder-input" type="text" value="" placeholder="Entrez un prénom" />
			<div class="scroller">
				<ul>
					<c:forEach var="utilisateur" items="${utilisateurs}" >
						<li data-prenom="${utilisateur.getPrenom()}" data-utilisateur-id="${utilisateur.getId()}" data-avatar-id="${utilisateur.getAvatar().getId()}"><img src="avatar?id=${utilisateur.getAvatar().getId()}"/> <span>${utilisateur.getPrenom()} ${utilisateur.getNom()}</span></li>
					</c:forEach>
				</ul>
			</div>
		</div>
		
		
		
		<script type="text/javascript">
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=200834466782016";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        </script>
        			
		<script type="text/javascript" src="/bitstrip/assets/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="/bitstrip/assets/js/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="/bitstrip/assets/js/cssbrowserselector.js"></script>
		<script type="text/javascript" src="/bitstrip/assets/js/script.js"></script>
		
	</body>
</html>